<template>
  <div class="EmergencyPlan">
    <el-row :gutter="24" class="EmergencyPlan-top" style="height:20%">
      <el-col :span="4">
        <div class="tabs">
          <div class="tabs-left">
            <img src="@/assets/img/plan01.png" alt="" class="" width="70" height="70">
          </div>
          <div class="tabs-right">
            <div class="tabs-right-title">知识库文件总数</div>
            <div class="tabs-right-bottom">
              <span class="tabs-right-bottom-number">{{klgFileSum}}</span>
              <span class="tabs-right-bottom-unit">篇</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="tabs">
          <div class="tabs-left">
            <img src="@/assets/img/plan02.png" alt="" class="" width="70" height="70">
          </div>
          <div class="tabs-right">
            <div class="tabs-right-title">本月上传知识库文件数</div>
            <div class="tabs-right-bottom">
              <span class="tabs-right-bottom-number">{{monthFileSum}}</span>
              <span class="tabs-right-bottom-unit">篇</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="tabs">
          <div class="tabs-left">
            <img src="@/assets/img/plan03.png" alt="" class="" width="70" height="70">
          </div>
          <div class="tabs-right">
            <div class="tabs-right-title">
              <div>知识库文件</div>
              <div>下载数</div>
            </div>
            <div class="tabs-right-bottom">
              <span class="tabs-right-bottom-number">{{klgDownload}}</span>
              <span class="tabs-right-bottom-unit">次</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="tabs">
          <div class="tabs-left">
            <img src="@/assets/img/plan04.png" alt="" class="" width="60" height="66">
          </div>
          <div class="tabs-right">
            <div class="tabs-right-title">应急预案总数</div>
            <div class="tabs-right-bottom">
              <span class="tabs-right-bottom-number">{{planSum}}</span>
              <span class="tabs-right-bottom-unit">篇</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="tabs">
          <div class="tabs-left">
            <img src="@/assets/img/plan05.png" alt="" class="" width="75" height="72">
          </div>
          <div class="tabs-right">
            <div class="tabs-right-title">
              <div>本月上传应急</div>
              <div>预案数</div>
            </div>
            <div class="tabs-right-bottom">
              <span class="tabs-right-bottom-number">{{monthEmergencySum}}</span>
              <span class="tabs-right-bottom-unit">篇</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="tabs">
          <div class="tabs-left">
            <img src="@/assets/img/plan06.png" alt="" class="" width="70" height="70">
          </div>
          <div class="tabs-right">
            <div class="tabs-right-title">
              <div>超期提醒应急</div>
              <div>预案占比</div>
            </div>
            <div class="tabs-right-bottom">
              <span class="tabs-right-bottom-number">{{exceedLimit}}%</span>
              <span class="tabs-right-bottom-unit"></span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="24" style="height:30%;">
      <el-col :span="12" style="height:100%;">
        <knowledge></knowledge>
      </el-col>
      <el-col :span="12" style="height:100%;">
        <plan></plan>
      </el-col>
    </el-row>
    <el-row :gutter="24" style="height:45%;" >
      <el-col :span="7" style="height:100%;">
        <knowledgePie></knowledgePie>
      </el-col>
      <el-col :span="7" style="height:100%;">
        <updatePie></updatePie>
      </el-col>
      <el-col :span="10" style="height:100%;">
        <updateTable></updateTable>
      </el-col>

    </el-row>
  </div>

</template>
<script>
import { getFileSumApi, getUploadApi, fileSumApi, uploadApi } from "@/api/EmengercyPlan/homepagecontent";

import knowledge from "./HomePageContent/knowledge.vue";
import plan from "./HomePageContent/plan.vue";
import knowledgePie from "./HomePageContent/knowledgePie.vue";
import updatePie from "./HomePageContent/updatePie.vue";
import updateTable from "./HomePageContent/updateTable.vue";

export default {
  name: "EmergencyPlan",
  components: {
    knowledge,
    plan,
    knowledgePie,
    updatePie,
    updateTable
  },
  data() {
    return {
      klgFileSum: "",
      klgDownload: "",
      planSum: "",
      exceedLimit: "",
      monthEmergencySum: "",
      monthFileSum: ""
    };
  },
  mounted() {
    this.getFileSum();
    this.getUpload();
  },
  methods: {
    getFileSum() {
      getFileSumApi({}).then(res => {
        console.log("知识库总数", res);
        this.klgFileSum = res.fileSum;
        this.klgDownload = res.download;
      });
      fileSumApi({}).then(res => {
        console.log("预案总数", res);
        this.planSum = res.planSum;
        this.exceedLimit = (res.exceedLimit * 100).toFixed(0);
      });
    },
    getUpload() {
      const months = `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`;
      getUploadApi({ month: months }).then(res => {
        console.log("知识库上传数", res.monthFileSum);
        this.monthFileSum = res.monthFileSum;
      });
      uploadApi({ month: months }).then(res => {
        console.log("预案上传数", res);
        this.monthEmergencySum = res.monthEmergencySum;
      });
    }
  }
};
</script>
<style scoped lang="less">
.EmergencyPlan {
  height: 100%;
  padding: 0px 20px;
}
.EmergencyPlan-top {
  /* height: 15%; */
  background-color: rgba(2, 167, 240, 0.2);
  margin: 0 3px !important;
  // width: 95%;
}
.tabs {
  display: inline-block;
  width: 260px;
  height: 150px;
  /* border: 1px solid #2054e2; */
  margin: 10px;
  background-image: url("../../assets/img/plan00.png");
  .tabs-left {
    height: 100%;
    width: 40%;
    display: inline-block;
    vertical-align: middle;
    /* background-color: red; */
  }
  .tabs-right {
    height: 100%;
    width: 60%;
    display: inline-block;
    vertical-align: middle;
    /* background-color: yellow; */
    .tabs-right-title {
      height: 40%;
      width: 90%;
      color: #fff;
      font-size: 18px;
      font-family: "Arial";
      margin-top: 20px;
    }
    .tabs-right-bottom {
      height: 59%;
      .tabs-right-bottom-number {
        color: #ff9900;
        font-size: 40px;
        font-weight: bold;
        font-family: "Arial";
        line-height: 50px;
        margin-left: 10px;
      }
      .tabs-right-bottom-unit {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        font-family: "Arial";
        margin-left: 10px;
      }
    }
  }
}

.EmergencyPlan-center {
  height: 40%;
}
.el-row {
  margin-top: 15px;
}
img {
  margin: 45px 20px;
}
</style>
